<template>
    <Popup v-model="showSelectAddress" :class="`tech-select-address-location ${mode} ${styleMode}`" position="bottom">
        <div class="location-input">
            <div class="location-action" @click="selectModal">
                <MiniIcon name="address" :size="18" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
                <div class="name title-color">{{defaultValue.showVal}}</div>
                <MiniIcon name="down" :size="18" :mode="mode" theme="#7D7D83" :styleMode="styleMode" />
            </div>
            <Field ref="searchInput" v-model="searchVal" placeholder="输入小区、写字楼、学校等" />
        </div>
        <div class="search-value-list" v-if="searchVal">
            <template v-if="searchList.length > 0">
                <AddressItem
                    v-for="(item, index) in searchList"
                    :key="index"
                    :addressInfo="item"
                    :searchVal="searchVal"
                    @select="selectedValue"
                    :mode="mode"
                    :theme="theme"
                    :styleMode="styleMode"
                />
            </template>
            <Empty v-else type="location" />
        </div>
        <template v-else>
            <div v-if="addressTip" :class="`auto-position ${mode}`">
                <div class="auto-title">当前定位地址</div>
                <div class="auto-address">
                    <div class="text-overflow" @click="selectLocation">{{addressTip}}</div>
                    <div class="auto-action" @click="resetLocation">
                        <TechIcon name="position" />重新定位
                    </div>
                </div>
            </div>
        </template>
        <SelectAreaValue ref="selectArea" :defaultValue="defaultValue.code" @result="selectAreaResult" />
    </Popup>
</template>

<script>
import { Field, Icon, Popup } from 'vant';
import { mapActions, mapState, mapGetters } from 'vuex';
import { TechIcon, TechPanel, TechCell, Empty, MiniIcon } from '@components/base';
import { getLocation } from '@common/environment';
import AddressItem from '../../common/components/AddressItem';
import SelectAreaValue from '../../common/components/SelectAreaValue';
import { getDefaultValue } from '@biztools/address';
import { navigateBack } from '@common/utils';
import ModeMixin from '@common/mixin';
import '@styles/biz/address';
export default {
    name: 'SelectAddressLocation',
    mixins: [ModeMixin],
    components: {
        Field,
        Icon,
        TechIcon,
        TechPanel,
        TechCell,
        AddressItem,
        Empty,
        SelectAreaValue,
        Popup,
        MiniIcon,
    },
    computed: {
        ...mapState({
            searchList: state => state.address.searchList,

            addressTip: state => state.shopAddress.addressTip,
            addressInfo: state => state.shopAddress.addressInfo,
            // address: state => state.address.matchAddress,
            // addressInfo: state => state.address.addressInfo,
        }),
    },
    created() {
        // 添加hash监听
        window.addEventListener('hashchange', this.handleHashChange, false);
    },
    watch: {
        searchVal(newVal, oldVal) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.startSearch();
            }, 500);
        },
    },
    data() {
        return {
            showSelectAddress: false,
            searchVal: '',
            defaultValue: getDefaultValue(this.addressTip),
        };
    },
    methods: {
        ...mapActions([
            'searchAddress',

            'searchShopAddressList',
            'matchShopAddress',
        ]),
        show() {
            this.initInfo();
            this.showSelectAddress = true;
        },
        async initInfo() {
            setTimeout(() => {
                this.$refs.searchInput.focus();
            }, 10);
        },
        close() {
            this.showSelectAddress = false;
        },
        startSearch() {
            if (this.searchVal) {
                this.searchAddress({
                    region: this.defaultValue.searchVal,
                    address: this.searchVal,
                });
            }
        },
        selectModal() {
            this.$refs.selectArea.show();
        },
        selectLocation() {
            this.selectedValue(this.addressInfo);
        },
        selectedValue(item) {
            // this.setSelectValue(item);
            this.$emit('ensure', item);
            this.close();
        },
        selectAreaResult(val) {
            this.defaultValue = val;
        },
        handleHashChange() {
            const hash = document.location.hash.replace('#', '');
            this.showSelectAddress = false;
            switch (hash) {
            case 'search':
                this.showSelectAddress = true;
                break;
            }
        },
    },
};
</script>
